<template lang="html">
	<div :class="$style.read">

		<RHeader v-if="showHeader" :class="$style.header"><span>返回</span></RHeader>
		<span v-if="contentData.title">{{contentData.title}}</span>
		<div :class="$style.touchBox" @click.stop="clickSet"></div>
		
		<div :class="[showHeader ? $style.contentTop : '', $style.content]" v-html="test"></div>
		
		<ul v-if="contentData" :class="$style.buttonBox">
			<li @click.stop="upBtnChapter">上一章</li>
			<li @click.stop="nextBtnChapter">下一章</li>
		</ul>
		
		<div v-if="toSet" :class="$style.setTab">
			<ul>
				<li v-for="(item,index) in items" :class="$style.item" @click.stop="ClickShowTab(index)">
						<svg class="icon" aria-hidden="true">
						    <use :xlink:href="item.icon"></use>
						</svg>
						<p>{{item.name}}</p>
				</li>
			</ul>
		</div>

		<div v-if="setPanel" :class="$style.setPanel">
			<div :class="$style.childMod">
				<span>字体</span>
				<button>大</button>
				<button>小</button>
			</div>
			<div :class="$style.childMod">
				<span>背景色</span>
			</div>
			<div :class="$style.childMod">
				<span>字体色</span>
			</div>
		</div>

		<div v-if="showChapters" :class="$style.chapters">
			<!-- 此处应该分页处理 -->
			<ul>
				<li v-for="(item,index) in chaptersData" :key="index">
					{{item.link}}
				</li>
			</ul>
		</div>

	</div>
</template>
<script>
	import RHeader from '../public/header';
	export default {
		name: 'read',
		data() {
			return {
				showHeader: false,
				showChapters: false,
				contentData: [],//章节数据
				chaptersData: [],//章节条目数据
				currentPrecess: 0,//记录阅读章节的进度
				test: '',
				toSet: false,//点击设置
				setPanel: false,//点击设置显示样式
				items: [
					{icon:'#icon-mulu',name:'目录'},
					{icon:'#icon-set',name:'设置'},
					{icon:'#icon-rijianmoshi',name:'日夜'}
				]
			}
		},
		components: {
			RHeader,
		},
		activated() {
			console.log('a');
			if (this.CacheHelper.getItem('currentBookChapters'))
			{
				console.log('c');
				this.contentData = [];
				this.chaptersData = this.CacheHelper.getItem('currentBookChapters');
				console.log('d');
				this.init();
			}else {
				console.log('b');
			}
		},
		methods: {
			init() {
				if (this.currentPrecess == 0) {
					this.showHeader = false;
					this.toSet = false;
					this.setPanel = false;
					this.showChapters = false;
					this.contentData = [];
					console.log('f');
					this.getContentByUrlIndex(this.currentPrecess);
				}else {
					console.log('e');
				}
			},
			nextBtnChapter() {
				//TODO 
				// 直接通过加载url来拼接内容 感觉也是不合理的
				this.currentPrecess = this.currentPrecess+1;
				this.getContentByUrlIndex(this.currentPrecess);
			},
			upBtnChapter() {
				//TODO 
				// 清空数据再从新加载上一张数据 是不合理的
				if (this.currentPrecess>=1) {
					this.currentPrecess = this.currentPrecess-1;
					this.test = '';
					this.getContentByUrlIndex(this.currentPrecess);
				}
			},
			//拉取章节内容
			getContentByUrlIndex(currentPrecess) {
				console.log('拉取章节内容');
				//TODO 加载进度条
				//
				document.body.scrollTop = 0;
				this.currentPrecess = currentPrecess;
				let url='';
				try {
					url = this.chaptersData[currentPrecess].link;
					url = this.CommonHelper.untranscodeUrl(url);
					url = this.CommonHelper.addressSplicing(url,'http://novel.juhe.im/chapters/');
				}catch(error) {
					console.log(error);
					return;
				}
				//TODO 网络请求
				this.$axios.get(url).then((response)=>{
					//JSON 字符串 在html中 转义

					//test 每3章清数据
					if (this.currentPrecess %3 ==0 ) {
						console.log('每3章清数据');
						this.test = '';
					}
					console.log('url: '+url);
					this.test += '<h2>'+response.data.chapter.title+'</h2>'+'<br/>'
											+'&nbsp;&nbsp;&nbsp;&nbsp;'+response.data.chapter.cpContent.replace(/\t/g, '')
													.replace(/\r\n/g, '<br/>&nbsp;&nbsp;&nbsp;&nbsp;')
													.replace(/\n/g, '<br/>&nbsp;&nbsp;&nbsp;&nbsp;')
													.replace(/\s/g, '&nbsp;')+'<br/>';
				}).catch((error)=>{
					console.log(error);
				});
			},
			clickSet() {
				if (this.toSet) {
					//我要隐藏
					console.log('我要隐藏');
					this.toSet = !this.toSet;
					this.showHeader = false;
					this.setPanel = false;
				}else {
					//我要设置
					console.log('我要设置');
					this.toSet = !this.toSet;
					this.showHeader = true;
				}
			},
			//设置显示样式相关
			ClickShowTab(index) {
				if (index == 0) {
					console.log('查看目录');
				}
				if (index == 1) {
					if (this.setPanel) {
						console.log('隐藏样式');
						this.setPanel = !this.setPanel;
					}else {
						//我要设置
						console.log('设置样式');
						this.setPanel = !this.setPanel;
					}
				}
				if (index ==2) {
					console.log('日夜交替');
				}
			},
		}
	}
</script>
<style lang="scss" module>
	.read {
		width: 100%;
		overflow: hidden;
		position: relative;
		.header {
			position: fixed;
			top: 0;
			z-index: 1000;
			text-align: left;
			color: #999;
			background-color: rgba(0,0,0,0.9);
			span {
				text-align: left;
				margin-left: 64px;
			}
		}
		.setPanel {
			width: 100%;
			position: fixed;
			bottom: 120px;
			left: 0;
			right: 0;
			z-index: 1000;
			background-color: rgba(0,0,0,0.9);
			color: #999;
			box-sizing: border-box;
		}
		.setTab {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			background-color: rgba(0,0,0,0.9);
			color: #999;
			ul {
				height: 120px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 24px;
				.item {
					flex: 1;
					text-align: center;
					svg {
						width: 36px;
						height: 36px;
					}
				}
			}
		}
		.touchBox {
			width: 25%;
			height: 667px;
			background-color: rgba(0,0,0,0);
			position: fixed;
			left: 50%;
			margin-left: -12.5%;
			top: 333.5px;
			z-index: 1000;
		}
		.content {
			padding-left: 18px;
			padding-right: 18px;
			font-size: 24px;
			letter-spacing: 4px;
			h2 {
				font-size: 36px;
				padding-top: 24px;
				text-align: center;
			}
		}
		.contentTop {
			margin-top: 110px;
		}
		.buttonBox {
			width: 80%;
			height: 60px;
			line-height: 60px;
			box-sizing: border-box;
			margin: 40px auto;
			font-size: 24px;
			li {
				display: inline-block;
				width: 49%;
				background-color: #000;
				border-right: 1px solid #858382;
				text-align: center;
				color: #fff;
				border-radius: 8px;
			}
		}
	}
</style>